<template>
  <div class="app-container">
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="步骤1" description="编辑基本信息"></el-step>
      <el-step title="步骤2" description="上传详细信息"></el-step>
      <el-step title="步骤3" description="发布课程"></el-step>
    </el-steps>
    <el-form
      ref="course"
      :model="course"
      label-width="80px"
      :label-position="labelPosition"
    >
      <el-form-item label="课程名称">
        <el-input v-model="course.coursesName" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="所属学院">
        <el-select
          v-model="course.collegeId"
          placeholder="请选择学院"
          @change="collegeNameChanged()"
        >
          <el-option
            v-for="item in CollegeList"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="任课教师">
        <el-select v-model="course.teacherId" placeholder="请选择教师">
          <el-option
            v-for="item in teacherList"
            :key="item.teacherId"
            :label="item.teacherName"
            :value="item.teacherId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程类别">
        <el-radio-group v-model="course.courseCategories">
          <el-radio :label="1">必修</el-radio>
          <el-radio :label="2">专选</el-radio>
          <el-radio :label="3">公选</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="学分">
        <el-input-number
          v-model="course.credit"
          :step="1"
          :min="0"
          :max="10"
          style="width: 250px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="学时">
        <el-input-number
          v-model="course.courseTime"
          :step="18"
          :min="0"
          :max="64"
          style="width: 250px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="建议学期">
        <el-input-number
          v-model="course.termNumber"
          :step="1"
          :min="0"
          :max="2"
          style="width: 250px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="成绩占比">
        <el-input
          v-model="course.scoreProportion"
          style="width: 250px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateOrSave()">立即创建</el-button>
        <el-button @click="clear()">清空信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import courseApi from "@/api/course";
import collegeApi from "@/api/college";
import teacherApi from "@/api/teacher";
export default {
  data() {
    return {
      labelPosition: "left",
      course: {
        courseCategories:1,
        credit:0,
        courseTime:0,
        termNumber:1
      },
      CollegeList: [],
      teacherList: [],
    };
  },
  created() {
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
      this.course = {};
    },
  },
  methods: {
    init() {
      //获取路由id值
      if (this.$route.params && this.$route.params.id) {
        this.course.coursesId = this.$route.params.id;
        this.getCourseInfoById();
      } else {
        //表单数据清空

        this.getCollegeList();
      }
    },
    getCourseInfoById() {
      courseApi.getCourseInfoById(this.course.coursesId).then((res) => {
        console.log(res.data);
        this.course = res.data.course;
        console.log(this.course);
        this.getCollegeList();
        this.getTeacherListByCollegeId();
      });
    },
    clear() {
      this.course = {};
    },
    updateOrSave() {
      //判断添加还是修改
      if (!this.course.coursesId) {
        //添加
        this.saveCourse();
      } else {
        this.updateCourse();
      }
    },
    updateCourse() {
      courseApi.updateCourse(this.course).then((res) => {
        //提示
        this.$message({
          type: "success",
          message: "修改课程基本信息成功!",
        });
        //跳转到第二步
        this.$router.push({
          path: "/course/detail/" + this.course.coursesId,
        });
      });
    },
    saveCourse() {
      courseApi.saveCourse(this.course).then((res) => {
        //提示
        this.$message({
          type: "success",
          message: "编辑基本成功!",
        });
        //跳转到第二步
        this.$router.push({
          path: "/course/detail/" + res.data.courseId,
        });
      });
    },
    getCollegeList() {
      collegeApi.getCollegeList().then((res) => {
        this.CollegeList = res.data.page.list;
      });
    },
    getTeacherListByCollegeId() {
      teacherApi
        .getTeacherListByCollegeId(this.course.collegeId)
        .then((res) => {
          this.teacherList = res.data.teacherList;
          console.log(res.data);
          console.log(this.teacherList);
        });
    },
    collegeNameChanged() {
      this.getTeacherListByCollegeId();
    },
  },
};
</script>

<style>
</style>